import { Component, OnInit } from '@angular/core'
import { autorun, observable } from 'mobx'
import { SelectionModel } from '../models/selection'
import remotedev from 'mobx-remotedev-v4/lib/dev'

const ITEMS = [
  { id: 1, name: 1 },
  { id: 2, name: 2 },
  { id: 3, name: 3 },
  { id: 4, name: 4 },
  { id: 5, name: 5 },
]

@Component({
  selector: 'app-selection-sample2',
  templateUrl: './selection-sample2.component.html',
  styleUrls: [ './selection-sample2.component.css' ]
})
export class SelectionSample2Component implements OnInit {
  @observable items = ITEMS

  selection = new SelectionModel(true)

  constructor() {
    remotedev(this.selection, { name: 'Selection list', global: true })

    autorun(() => {
      console.log(this.selection.selected)
    })
    autorun(() => {
      const lc = this.selection.lastChange
      console.log(lc)
    })
  }

  ngOnInit() {
  }

  onClick() {
    this.selection.clear()
    const id1 = Math.floor((Math.random() * 10) % 5 + 1)
    const id2 = Math.floor((Math.random() * 10) % 5 + 1)
    console.log('force to select', [ id1, id2 ])
    this.selection.select(id1, id2)
  }
}
